{{template "layout.html" .}}

{{define "content"}}
<div class="container-fluid">
    <div class="row">
        <!-- 文件树侧边栏 -->
        <div class="col-md-3">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">文件列表</h5>
                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addFileModal" aria-label="新建文件">
                        <i class="fas fa-plus" aria-hidden="true"></i> 新建文件
                    </button>
                </div>
                <div class="card-body p-0">
                    <div class="list-group file-tree">
                        {{range .Files}}
                        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center file-item {{if hasSuffix .Name ".py"}}python-file{{end}} {{if eq .Name $.MainFile}}main-file{{end}}"
                           data-filename="{{.Name}}" aria-label="{{.Name}}">
                            <div>
                                {{if hasSuffix .Name ".py"}}
                                <i class="fab fa-python" aria-hidden="true"></i>
                                {{else}}
                                <i class="far fa-file" aria-hidden="true"></i>
                                {{end}}
                                {{.Name}}
                            </div>
                            <div class="btn-group">
                                {{if hasSuffix .Name ".py"}}
                                <button class="btn btn-outline-primary btn-sm set-main-file" aria-label="设置{{.Name}}为主文件"
                                        {{if eq .Name $.MainFile}}disabled{{end}}>
                                    <i class="fas fa-star" aria-hidden="true"></i>
                                </button>
                                {{end}}
                                <button class="btn btn-outline-danger btn-sm delete-file" aria-label="删除{{.Name}}">
                                    <i class="fas fa-trash" aria-hidden="true"></i>
                                </button>
                            </div>
                        </a>
                        {{end}}
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑器区域 -->
        <div class="col-md-9">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0" id="current-file">未选择文件</h5>
                    <div>
                        <button class="btn btn-success btn-sm" id="save-file" aria-label="保存文件">
                            <i class="fas fa-save" aria-hidden="true"></i> 保存
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div id="monaco-editor" style="height: 600px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 新建文件模态框 -->
<div class="modal fade" id="addFileModal" tabindex="-1" aria-labelledby="addFileModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addFileModalLabel">新建文件</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <form id="add-file-form">
                    <div class="mb-3">
                        <label for="filename" class="form-label">文件名</label>
                        <input type="text" class="form-control" id="filename" name="filename" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="submit" form="add-file-form" class="btn btn-primary">创建</button>
            </div>
        </div>
    </div>
</div>

<!-- Toast 容器 -->
<div class="toast-container position-fixed bottom-0 end-0 p-3"></div>
{{end}}

{{define "scripts"}}
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/loader.js"></script>
<script>
    const scriptId = {{.ScriptID}};
</script>
<script src="/static/js/main.js"></script>
{{end}} 